<template>
  <div class="el-dropdown">
    <el-button
      type="text"
      size="mini"
      @click="opendetail(selectedData)"
    >{{ data }}
    </el-button>
    <el-dialog
      ref="progress"
      title="订单明细"
      width="60%"
      :visible.sync="progressVisible"
      append-to-body
      @close="closedetail()"
    >
      <div ref="detail" v-loading="listLoading" class="add-container " style="height: 420px;margin: 0">
        <el-tabs value="first">
          <el-tab-pane label="订单详情" name="first">
            <!-- 标签页开始 -->
            <h4>基础信息</h4>
            <el-row :gutter="30">
              <el-col :span="8">
                <el-descriptions :colon="false" :column="1" title="订单信息">
                  <el-descriptions-item label="订单号：">{{ dialogShow.order_id }}</el-descriptions-item>
                  <el-descriptions-item label="下单时间：">{{ dialogShow.created_at }}</el-descriptions-item>
                  <el-descriptions-item label="付款状态：">
                    <span :class="`pay-tag-${dialogShow.pay_status}`">{{ dialogShow.pay_status_name }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'online'" label="支付时间：">{{ dialogShow.pay_time }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'online'" label="支付方式：">{{ dialogShow.payment_name }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'offline'" label="收银员：">{{ dialogShow.operator.name }}</el-descriptions-item>
                  <!-- <el-descriptions-item v-if="dialogShow.order_refer === 'online'" label="接单状态：">
                    <span :class="`pay-tag-${dialogShow.confirm_status}`">{{ dialogShow.confirm_status_name }}</span>
                  </el-descriptions-item> -->
                  <el-descriptions-item v-if="dialogShow.order_refer === 'online'" label="订单状态：">
                    <span v-if="dialogShow.confirm_status !==1 && dialogShow.confirm_status !==3">{{ dialogShow.confirm_status_name }}</span>
                    <span v-else-if="dialogShow.shipping_type !== 0" :class="`pay-tag-${dialogShow.pickself_status}`">{{ dialogShow.pay_status==4 ? '已取消' : (dialogShow.pickself_status ==0 ? '待取件':'已完成') }}</span>
                    <span v-else :class="`pay-tag-${dialogShow.ship_status}`">{{ dialogShow.pay_status==4 ? '已取消' : dialogShow.ship_status_name }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'offline'" label="订单状态：">
                    <span :class="`pay-tag-${dialogShow.ship_status}`">{{ dialogShow.pay_status==4 ? '已取消' : (dialogShow.ship_status === 1 ? '已完成' : dialogShow.ship_status_name) }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'online'" label="配送方式：">{{ dialogShow.shipping_type_name }}</el-descriptions-item>
                  <el-descriptions-item v-if="(dialogShow.order_refer === 'online' && dialogShow.shipping_type !== 0)" label="自提时间：">{{ dialogShow.pickself_time }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'offline'" label="订单来源：">{{ dialogShow.source_name }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'online'" label="发货门店：">{{ dialogShow.store == null ? '--':dialogShow.store.store_name }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'offline'" label="门店：">{{ dialogShow.store == null ? '--':dialogShow.store.store_name }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'offline'" label="会员：">{{ dialogShow.member ==null ? '--': dialogShow.member.mobile }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col v-if="dialogShow.order_refer === 'online'" :span="5">
                <el-descriptions :colon="false" :column="1" title="会员信息">
                  <el-descriptions-item label="会员：">{{ dialogShow.member ==null ? '--': dialogShow.member.mobile }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="(dialogShow.shipping_type ===0)" label="收货人：">{{ dialogShow.ship_name }}</el-descriptions-item>
                  <el-descriptions-item v-if="(dialogShow.shipping_type !== 0)" label="收货人：">{{ dialogShow.ship_mobile }}</el-descriptions-item>
                  <el-descriptions-item v-if="(dialogShow.shipping_type ===0)" label="收货手机：">{{ dialogShow.ship_mobile }}</el-descriptions-item>
                  <el-descriptions-item v-if="(dialogShow.shipping_type ===0)" label="收货地址：">{{ dialogShow.ship_addr }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="7">
                <el-descriptions :colon="false" :column="1" title="付款信息">
                  <el-descriptions-item label="商品总价：">{{ dialogShow.cost_item }}</el-descriptions-item>
                  <el-descriptions-item v-if="dialogShow.order_refer === 'offline'" label="支付方式：">{{ dialogShow.payment_name }}</el-descriptions-item>
                  <el-descriptions-item label="配送费：">{{ dialogShow.cost_freight }}</el-descriptions-item>
                  <el-descriptions-item v-for="(item, index) in discountShow" :key="index" :label="`${item.pmt_type_name} ：` ">-{{ item.total_amt }}</el-descriptions-item>
                  <el-descriptions-item label="应付款：">{{ dialogShow.total_amount }}</el-descriptions-item>
                  <el-descriptions-item label="实付款：">{{ dialogShow.payed }}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>
            <!-- 标签页结束 -->
          </el-tab-pane>

          <el-tab-pane v-if="detailData.length > 0" label="商品详情" name="second">
            <!-- 标签页开始 -->
            <h4>商品详情</h4>
            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="detailData"
                height="180"
                border
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="name" label="商品" width="200" />
                <el-table-column prop="g_price" label="单价" width="100" />
                <el-table-column prop="price" label="现价/会员价" />
                <el-table-column prop="nums" label="商品数量" />
                <el-table-column v-if="(dialogShow.order_refer === 'online' && dialogShow.shipping_type ===0)" prop="sendnum" label="已发货数量" />
                <el-table-column v-if="(dialogShow.order_refer === 'online' && dialogShow.shipping_type ===0)" prop="amount" label="未发货数量">
                  <template slot-scope="scope">
                    {{ scope.row.nums - scope.row.sendnum }}
                  </template>
                </el-table-column>
                <el-table-column v-else prop="amount" label="小计" />
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="filter.page"
                :limit.sync="filter.limit"
                @pagination="getList(selectedData)"
              />
            </div>
            <!-- 标签页结束 -->
          </el-tab-pane>
          <el-tab-pane v-if="activityList.length > 0" label="优惠详情" name="third">
            <!-- 标签页开始 -->
            <h4>优惠详情</h4>
            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="activityList"
                border
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="addon" label="活动名称" />
                <el-table-column prop="pmt_type_name" label="活动类型" />
                <el-table-column prop="amt" label="抵扣金额" />
              </el-table>
            </div>

            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="couponList"
                border
                style="margin-top: 10px"
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="addon" label="优惠券名称" />
                <el-table-column prop="pmt_type_name" label="优惠券类型" />
                <el-table-column prop="amt" label="优惠金额" />
              </el-table>
            </div>
            <!-- 标签页结束 -->
          </el-tab-pane>

          <el-tab-pane v-if="1 < 0" label="发货记录" name="fourth">
            <!-- 标签页开始 -->
            <h4>发货记录</h4>
            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="deliverySend"
                border
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="product_name" label="商品" />
                <el-table-column prop="nums" label="发货数量" />
                <el-table-column prop="created_at" label="发货时间" />
                <el-table-column prop="logi_name_no" label="快递公司" />
                <el-table-column prop="delivery_bn" label="快递单号" />
                <el-table-column prop="op_name" label="操作人" />
              </el-table>
            </div>
            <!-- 标签页结束 -->
          </el-tab-pane>

          <el-tab-pane v-if="deliveryRefund.length > 0" label="退货记录" name="fifth">
            <!-- 标签页开始 -->
            <h4>退货记录</h4>
            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="deliveryRefund"
                border
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="product_name" label="商品" />
                <el-table-column prop="nums" label="退货数量" />
                <el-table-column prop="created_at" label="退货时间" />
                <el-table-column prop="op_name" label="操作人" />
              </el-table>
            </div>
            <!-- 标签页结束 -->
          </el-tab-pane>

          <el-tab-pane v-if="orderPay.length > 0" label="支付/退款记录" name="sixth">
            <!-- 标签页开始 -->
            <h4>支付记录</h4>
            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="orderPay"
                border
                class="table-width"
                row-key="payment_id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="payment_id" label="支付单号" width="160px" />
                <el-table-column prop="created_at" label="创建时间" width="150px" />
                <el-table-column prop="t_payed" label="支付完成时间" width="150px" />
                <!-- <el-table-column prop="status_name" label="支付状态" width="150px" /> -->
                <el-table-column prop="money" label="支付金额" />
                <el-table-column prop="pay_name" label="支付方式" />
                <el-table-column prop="users.name" label="操作人" />
              </el-table>
            </div>
            <!-- 标签页开始 -->

            <h4 v-if="orderRefund.length > 0">退款记录</h4>
            <div v-if="orderRefund.length > 0">
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="orderRefund"
                border
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="refund_id" label="退款单号" width="160px" />
                <el-table-column prop="created_at" label="创建时间" width="150px" />
                <el-table-column prop="updated_at" label="退款完成时间" width="150px" />
                <!-- <el-table-column prop="total_amount" label="实付金额" /> -->
                <el-table-column prop="money" label="退款金额" />
                <el-table-column prop="pay_name" label="退款方式" />
                <el-table-column prop="operator.name" label="操作人" />
              </el-table>
            </div>
            <!-- 标签页结束 -->
          </el-tab-pane>
          <el-tab-pane v-if="logsList.length > 0" label="订单日志" name="seventh">
            <!-- 标签页开始 -->
            <h4>订单日志</h4>
            <div>
              <el-descriptions :colon="false" />
              <el-table
                :cell-style="{ textAlign: 'center' }"
                :data="logsList"
                border
                class="table-width"
                row-key="id"
                size="mini"
                :header-cell-class-name="headerStyle"
              >
                <el-table-column prop="alttime" label="时间" width="150px" />
                <el-table-column prop="op_name" label="操作人" width="150px" />
                <el-table-column prop="behavior" label="行为" />
                <el-table-column prop="result" label="结果" />
                <el-table-column prop="log_text" label="备注" />
              </el-table>
            </div>
            <!-- 标签页结束 -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import layoutMinix from '@/layout/components/mixins/layout'
import { getOrderShow, getOrderItems } from '@/api/orders'
import checkPermission from '@/utils/permission' // 权限判断函数
import Pagination from '@/components/Pagination'

export default {
  name: 'OrderDeatil',
  components: { Pagination },
  mixins: [layoutMinix],
  props: {
    selectedData: {
      required: true,
      type: String,
      default() {
        return ''
      }
    },
    data: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      listLoading: false,
      total: 0,
      filter: {
        page: 1,
        limit: 10,
        order_id: undefined
      },
      send: 0,
      no_send: 0,
      nums: 1,
      allCorps: [],
      dialogList: [],
      dialogVisible: false,
      dialogShow: [],
      detailData: [],
      multipleSelection: [],
      couponList: [],
      activityList: [],
      deliverySend: [],
      deliveryRefund: [],
      orderRefund: [],
      orderPay: [],
      logsList: [],
      refundisShow: false,
      refundPayOrderInfo: {},
      payTypeList: [],
      sendRefundInfo: {},
      choosePaymentInfo: [],
      paymentTotal: 0,
      refundGoodIsShow: false,
      refundGoodInfo: {},
      refundDoogsList: [],
      checkRefundGoods: [],
      progressVisible: false,
      editForm: {},
      payOrderList: [],
      goodsVisible: false,
      goodForm: {},
      goodSelection: [],
      discountShow: []
    }
  },
  /* mounted() {
    this.show()
  },*/
  methods: {
    checkPermission,
    headerStyle({ row, rowIndex }) {
      return 'table-th'
    },
    opendetail(id) {
      this.progressVisible = true
      this.show(id)
      this.getList(id)
    },
    closedetail() {
      this.progressVisible = false
    },
    show(id) {
      this.listLoading = true
      getOrderShow(id).then((response) => {
        const { list, item } = response.data
        this.dialogList = list
        this.dialogShow = Object.assign({}, item, {
          member_name: item.member ? item.member.name : '',
          id_no: item.operator ? item.operator.id_no : '',
          payment_name: item.payment ? item.payment.pay_name : ''
        })
        this.discountShow = item.discount
        // this.detailData = item.items
        this.couponList = []
        this.activityList = []
        this.logsList = item.logs
        for (let i = 0; i < response.data.item.pmt.length; i++) {
          if (response.data.item.pmt[i].pmt_type === 3) {
            this.couponList.push(response.data.item.pmt[i])
          } else {
            this.activityList.push(response.data.item.pmt[i])
          }
        }

        this.deliverySend = []
        this.deliveryRefund = []
        for (let i = 0; i < response.data.item.delivery.length; i++) {
          if (response.data.item.delivery[i].delivery_type === 0) {
            for (let j = 0; j < response.data.item.delivery[i].items.length; j++) {
              const sendInfo = response.data.item.delivery[i].items[j]

              sendInfo.created_at = response.data.item.delivery[i].created_at
              sendInfo.logi_name_no = response.data.item.delivery[i].logi_name_no
              sendInfo.delivery_bn = response.data.item.delivery[i].delivery_bn
              sendInfo.op_name = response.data.item.delivery[i].op_name

              this.deliverySend.push(sendInfo)
            }
          } else {
            for (let j = 0; j < response.data.item.delivery[i].items.length; j++) {
              const refundInfo = response.data.item.delivery[i].items[j]
              refundInfo.created_at = response.data.item.delivery[i].created_at
              refundInfo.logi_name_no = response.data.item.delivery[i].logi_name_no
              refundInfo.delivery_bn = response.data.item.delivery[i].delivery_bn
              refundInfo.op_name = response.data.item.delivery[i].op_name
              this.deliveryRefund.push(refundInfo)
            }
          }
        }

        this.orderRefund = response.data.item.refund
        for (let i = 0; i < this.orderRefund.length; i++) {
          this.orderRefund[i].total_amount = response.data.item.total_amount
        }
        this.orderPay = response.data.item.pay
        this.listLoading = false
      })
    },
    /**
       * 获取商品列表
       */
    getList(id) {
      this.listLoading = true
      this.filter.order_id = id
      getOrderItems(this.filter).then((response) => {
        const { list, total } = response.data
        this.detailData = list
        this.total = total
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
  .detail-title {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 10px 0;
  }

  .item-label {
    width: 80px;
  }
</style>
